<template>
  <div class="pd-20">
    <el-input v-model="search"
              placeholder="请输入主题名称"
              clearable
              @clear="handleQuery"
              class="w-200"></el-input>
    <el-button type="primary"
               @click="handleQuery">查询</el-button>
    <el-button type="primary"
               @click="handleOption(null, 'add')">新 增</el-button>
    <element-table :columns="columns"
                   class="mt-20"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:edit="{row}">
        <el-button type="primary"
                   @click="handleOption(row, 'edit')">编 辑</el-button>
        <el-button type="danger"
                   @click="handleOption(row, 'del')">删 除</el-button>
        <el-button type="info"
                   @click="handleOption(row, 'material')">素材管理</el-button>
      </template>
      <template v-slot:complicationName="{row}">
        <label v-for="(item, index) in row.complicationName.split(',')"
               :key="index"
               style="margin-right:10px;">
          <el-tag type="success"
                  style="margin-top:5px;">{{item}}</el-tag>
        </label>
      </template>
      <template v-slot:healthName="{row}">
        <div v-if="row.healthName">
          <div v-for="(item, index) in row.healthName.split(',')"
               :key="index">
            <el-tag type="success"
                    style="margin-top:5px;">{{item}}</el-tag>
          </div>
        </div>

      </template>
    </element-table>
    <special-item-dialog :dataObj="dataObj"
                         v-if="isShow"
                         :visible.sync="isShow"></special-item-dialog>
  </div>

</template>
<script>
  import elementTable from '@/base/ElementTable'
  import specialItemDialog from './specialItemDialog'
  export default {
    name: 'specialTheme', // 特色专项主题管理
    data () {
      return {
        loading: false,
        isShow: false,
        columns: [
          {
            label: '主题名称',
            prop: 'deviceNames',
          },
          {
            label: '关联合并症',
            prop: 'complicationName',
            isSlot: true
          },
          {
            label: '推荐健康筛查项目',
            prop: 'healthName',
            isSlot: true
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '操作',
            prop: 'edit',
            isSlot: true,
            align: "center",
            width: 280,
          }
        ],
        tableData: [],
        pageTotal: 0,
        search: '',
        pageIndex: 1,
        pageSize: 20,
        dataObj: {}
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex=1
        this.getList()
      },
      getList () {
        this.post(this.api.promote.themeInfoList, {
          search: this.search,
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          type: 2
        }).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })
      },
      handleOption (row, op) {
        switch (op) {
          case 'add':
            this.dataObj = null;
            this.isShow = true;
            break;
          case 'edit':
            this.dataObj = Object.assign({}, row);
            this.isShow = true;
            break;
          case 'del':
            this.$confirm('您是否要删除该专项主题？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.delTermTheme, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('删除成功!')
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
          case 'material':
            this.$router.push({ name: 'material', query: { routeParams: JSON.stringify(row) } });
            break;
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': elementTable,
      'special-item-dialog': specialItemDialog,
    }
  }
</script>
<style scoped lang="scss">
</style>
